<template>
  <div>
    <li>
      <button @click="handleGetCode">获取验证吗</button>
    </li>
    <li>
      <label for="authCode">验证码</label>
      <input type="text" v-model="userForm.authCode" id="authCode" />
    </li>
    <li>
      <button @click="handleLogin">登录</button>
    </li>
  </div>
</template>

<script>
import { getMobileAutoCode, loginIn } from "@/network/api/login";
import { saveUserInfo } from "@/assets/js/auth";
export default {
  data() {
    return {
      userForm: {
        authCode: "",
        version: "153",
        mobile: "15369816217",
        token: "",
      },
    };
  },
  methods: {
    // 获取验证码
    handleGetCode() {
      this.$indicator.open({
        text: "加载中...",
        spinnerType: "fading-circle",
      });
      getMobileAutoCode({
        token: "",
        mobile: "15369816217",
        type: "login", // 业务类型
        openId: "",
      }).then((res) => {
        if (res.code === "0") {
          this.$toast({
            message: "验证码发送成功",
            position: "middle",
            duration: 3000,
          });
        } else {
          this.$toast({
            message: res.msg,
            position: "middle",
            duration: 3000,
          });
        }
      });
    },
    // 用户登录
    handleLogin() {
      this.$indicator.open({
        text: "加载中...",
        spinnerType: "fading-circle",
      })
      loginIn({
        token: "",
        mobile: "15369816217",
        authCode: this.userForm.authCode, // 业务类型
        version: 153,
      }).then((res) => {
        if (res.code === "0") {
          // 存储token
          saveUserInfo({
            token: res.data.token,
          });
          const { redirect } = this.$route.query;
          // 如果查询字符串中有 redirect 字段，则直接跳转到这里
          if (redirect) {
            this.$router.push(redirect.substr(1))
          } else {
            this.$toast({
              message: "登陆成功!",
              position: "middle",
              duration: 3000,
            });
            setTimeout(() => {
              this.$router.push({
                path: "/home",
              });
            }, 3000);
          }
        } else{
            this.$toast({
            message: res.msg,
            position: "middle",
            duration: 3000,
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
li {
  margin-bottom: 20px;
}
button {
  width: 100px;
  height: 50px;
}
label {
  font-size: 15px;
}
input {
  width: 250px;
  height: 30px;
}
</style>
